<template>
  <div>
    <!-- 搜索 -->
    <el-card>
      <el-form inline>
        <el-form-item label="用户名" style="width: 300px">
          <el-input v-model="username"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :disabled="!username" @click="findUser">搜素</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card>
      <!-- 添加用户 批量删除 -->
      <el-button v-has="'btn.User.add'" type="primary" @click="addUser">添加用户</el-button>
      <el-button v-has="'btn.User.remove'" type="danger" :disabled="deleteList.length == 0" @click="deleteMore">批量删除</el-button>

      <!-- 表格 -->
      <el-table ref="multipleTableRef" :data="userTable" style="width: 100%; margin: 20px 0" @selection-change="handleSelectionChange">
        <el-table-column fixed type="selection" width="55" />
        <el-table-column type="index" label="序号" width="55" />
        <el-table-column property="id" label="id" width="120" />
        <el-table-column property="name" label="用户名字" width="120" />
        <el-table-column property="username" label="用户名称" width="120" />
        <el-table-column property="roleName" align="center" label="用户角色" show-overflow-tooltip width="120" />
        <el-table-column property="createTime" align="center" label="创建时间" show-overflow-tooltip width="120" />
        <el-table-column property="updateTime" align="center" label="更新时间" show-overflow-tooltip width="120" />
        <el-table-column fixed="right" label="操作" width="260">
          <template #default="{ row }">
            <el-button v-has="'btn.User.assgin'" size="small" type="primary" @click="assignRole(row)">分配角色</el-button>
            <el-button v-has="'btn.User.update'" size="small" type="primary" @click="edit(row)">编辑</el-button>
            <el-button v-has="'btn.User.remove'" size="small" type="danger" @click="deleteItem(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 7, 9]" :small="small" :background="true" layout="prev, pager, next, jumper,->,sizes,total" :total="total" @size-change="handleSizeChange" @current-change="getUserData" />
    </el-card>

    <div>
      <AddOrEdit ref="add_or_edit_ref" :type="type"></AddOrEdit>
    </div>
    <div>
      <Role ref="role_ref"></Role>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, onMounted, ref } from 'vue'
import { reqRemoveUser, reqUserInfo, reqDeleteMoreUser } from '@/utils/api/acl/user/index'
import { User } from '@/utils/api/acl/user/type'

const AddOrEdit = defineAsyncComponent(() => import('./AddOrEdit.vue'))
const Role = defineAsyncComponent(() => import('./Role.vue'))

// 分页器的参数
const currentPage = ref(1)
const pageSize = ref<number>(5)
const small = ref(false)
const total = ref<number>(0)

const username = ref<string>('')

// 表格数
const userTable = ref<User[]>([])
// 添加用户或者编辑用户的ref
const add_or_edit_ref = ref()
// 添加还是编辑
const type = ref<string>('add')
// 批量删除
const deleteList = ref<number[]>([])
// 分配角色的ref
const role_ref = ref()

import { ElTable } from 'element-plus'

const multipleTableRef = ref<InstanceType<typeof ElTable>>()

onMounted(() => {
  getUserData()
})

// 多选框的改变
const handleSelectionChange = (val: User[]) => {
  const arrId: number[] = []
  val.forEach((item: User) => {
    arrId.push(item.id!)
  })

  deleteList.value = arrId
}

// 获取表格信息
const getUserData = async (page = 1) => {
  currentPage.value = page
  const res = await reqUserInfo(currentPage.value, pageSize.value, username.value)
  if (res.data.code == 200) {
    userTable.value = res.data.data.records
    total.value = res.data.data.total
  }
}

// 处理分页器每页展示条数的改变
const handleSizeChange = (size: number) => {
  pageSize.value = size
  getUserData(currentPage.value)
}

// 添加用户
const addUser = () => {
  type.value = 'add'
  add_or_edit_ref.value.changeDialog()
}

// 编辑按钮
const edit = (row: User) => {
  type.value = 'update'
  add_or_edit_ref.value.changeDialog(row)
}

// 删除
const deleteItem = async (row: User) => {
  const res = await reqRemoveUser(row.id!)
  if (res.data.code == 200) {
    ElMessage.success('删除成功')
    getUserData(currentPage.value)
  }
}

// 批量删除
const deleteMore = async () => {
  const res = await reqDeleteMoreUser(deleteList.value)
  if (res.data.code == 200) {
    ElMessage.success('删除成功')
    getUserData(currentPage.value)
  }
}

// 搜索用户
const findUser = () => {
  getUserData(currentPage.value)
}

// 分配角色
const assignRole = (row: User) => {
  role_ref.value.changeShow(row)
}

defineExpose({ getUserData })
</script>

<style scoped></style>
